<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/marked/9.0.0/marked.min.js"></script>
  <script src="js/echarts.min.js"></script>
  <style>
    body, html{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .container{
        width: 100%;
        /*height: 100%;*/
        display: flex;
        justify-content: space-around;
    }

    .container .model-content{
        padding: 5px;
    }

    .container .model-1, .model-2{
        width: 49%;
        /*height: 100%;*/
        border: 1px solid #dee2e6;
        border-radius: 10px;
    }

    .container .model-title{
        text-align: center;
        padding: 10px 15px;
        border-bottom: 1px solid #dee2e6;
    }

    .input-area{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5px 10px;
        background: #fff;
        border: 1px solid #dee2e6;
        box-sizing: border-box;
    }

    .echarts{
        width: 100%;
        height: 500px;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="model-1">
    <div class="model-title">官方Model</div>
    <div class="model-content">
      <ul id="modelOrigin" class="list-group">

      </ul>
    </div>
  </div>
  <div class="model-2">
    <div class="model-title">微调1.0Model</div>
    <div class="model-content">
      <ul id="modelContrast" class="list-group">

      </ul>
    </div>
  </div>
  <div class="input-group input-area">
    <input id="textInput" type="text" class="form-control" placeholder="">
    <button class="btn btn-outline-secondary" type="button" id="sendMessage">发送</button>
  </div>
</div>
<script>
  $(() => {
      $('#sendMessage').click(() => {
          $.ajax({
              url: 'http://127.0.0.1:4000/contrast',
              data: {
                  query: $('#textInput').val(),
                  un: 'a1'
              },
              method: 'get',
              dataType: 'JSON',
              success: (res) => {
                  let nowTime = new Date().getTime();
                  let data = res.data;
                  let origin = marked.parse(data.answer.content);
                  let contrast = marked.parse(data.contrast.content);

                  console.log(origin);
                  console.log(contrast);

                  $("#modelOrigin").html(``);
                  $("#modelContrast").html(``);

                  $("#modelOrigin").append(`<li class="list-group-item">${origin}</li>`);
                  $("#modelContrast").append(
                      `<li class="list-group-item">${contrast} <div class="echarts" id="echart${nowTime}"></div> </li>`
                  );

                  initEcharts(`echart${nowTime}`, data.ec);

                  $('#textInput').val('');
              },
              error: (e) => {
                  console.log(e);
              }
          });
      });

      function initEcharts (id, data) {
          let myChart = echarts.init(document.getElementById(id));
          myChart.setOption(data);
      }
  });
</script>
</body>
</html>